<template>
	<view class="write-page">
		<div class="head search-blank">
			<div class="class-list">
				<div
					class="class-item"
					v-for="(item, index) in classList"
					@click="handleNavClick(index)"
					:class="{ active: index == currentIndex }"
					:key="index"
				>
					{{ item.type }}
				</div>
			</div>
		</div>

		<div class="container" :style="{opacity: showLoad ? '0' : 1}">
			<mp-vtabs
				:vtabs="items.map((item) => ({ title: item.name }))"
				:activeTab="activeTab"
				@bindtabclick="onTabCLick"
				@bindchange="onChange"
			>
				<block v-for="(item, index) in items" :key="index">
					<mp-vtabs-content class="vtabs_content" :tabIndex="index">
						<div
							v-for="(item1, index1) in item.list"
							:key="index1"
							:id="'top' + index1"
							class="content-box"
						>
							<div class="tit">{{ item1.seriesType }}</div>
							<div class="list-box">
								<div
									v-for="(item2, index2) in item1.list2"
									:key="index2"
									class="list-item"
								>
									<div class="margin-20" @click="startExam(item2)">
										<div class="item-left">
											<div>{{ item2.examName }}&nbsp;</div>
											<div
												v-if="item2.questionType && currentIndex !== 0"
												class="blue-icon"
											>
												{{ item2.questionType }}
											</div>
											<span v-if="item2.finishCount" class="answer-count">完成{{item2.finishCount}}次</span>
										</div>
										<div v-if="item2.practiceStatus == 2" class="item-right">
											正确率：
											<span>{{ item2.rightTopicCount }}</span>
											/{{ item2.allTopicCount }}
										</div>
									</div>
									<div v-if="item2.latestPractice" class="red-icon">上次练习</div>
								</div>
							</div>
						</div>
					</mp-vtabs-content>
				</block>
			</mp-vtabs>
		</div>
		<!-- 重新进入提示弹窗 -->
        <uni-popup ref="reCordPopupRef" background-color="#fff" borderRadius="10px" @on-mask-click="maskClick">
            <div class="pop-content" @click.stop>
				<text class="main">上次答题中断，是否继续作答？</text>
                <div class="btn">
					<text class="btn-item2" @click.stop="jumpExam(tempItem, 0)">重新作答</text>
					<text class="btn-item2" @click.stop="jumpExam(tempItem, 1)">继续作答</text>
                </div>
            </div>
        </uni-popup>
		<div class="load" v-if="showLoad">
			<uni-load-more class="load-com" :contentText="{contentrefresh: ''}" color="#1989fa" iconType="circle" status="loading" />
		</div>
	</view>
</template>

<script>
import { apiWriteList, apiWriteExamList } from '@/api/exam/exam.js'
export default {
	data() {
		return {
			status: 'more',
			contentText: {
				contentdown: '', //查看更多
				contentrefresh: '加载中',
				contentnomore: '- 已经到底了 -'
			},
			currentIndex: 0,
			typeIndex: 0,
			classList: [],
			dataList: {
				testList: [],
				total: 0
			},
			scrollLeft: 0,
			scrollViewWidth: 0,
			pageSize: 20,
			pageNum: 1,
			knowledgeList: [],
			type: 0,

			items: [],
			activeIndex: 0,
			sections: [],
			vtabs: [],
			activeTab: 0,
			tempItem: {},
			showLoad: true
		}
	},
	onLoad(options) {
		this.type = options.type

		// this.getTypeList()
		this.handleNavClick(this.type - 1)
	},
	onShow(){
		this.classList.length && this.updateList()
	},
	methods: {
		maskClick(){
			this.$refs.reCordPopupRef.close()
		},
		onTabCLick(e) {
			const index = e.detail.index
			console.log('tabClick', index)
		},

		onChange(e) {
			const index = e.detail.index
			console.log('change', index)
		},
		// 开始进行作答
		startExam(item) {
			if(item.practiceStatus == 0){
				this.$refs.reCordPopupRef.open()
				this.tempItem = item
			}else {
				this.jumpExam(item)
			}
			
		},
		jumpExam(item, useRecord = 0){
			this.$refs.reCordPopupRef.close()
			uni.navigateTo({
				url: '/pages/exam/writeExam?id=' + item.examId + `&recordId=${item.recordId}&useRecord=${useRecord}`
			})
			this.tempItem = {}
		},

		handleNavClick(type) {
			console.log('导航项被点击:', type)
			this.currentIndex = type
			this.items = []
			this.getClassList(type)
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0 // 动画时长，默认300ms，可以设置为0表示无动画直接跳转
			})
		},
		async updateList(){
			if(this.classList.length){
				this.getClassList(this.currentIndex)
			}
		},
		async getClassList(type) {
			this.showLoad = true
			const list = []
			try {
				const classList = await apiWriteList() // 等待获取初始的 class list
				this.classList = classList.data
				const knowledgeList = classList.data[type].knowledgeList
				for (const item of knowledgeList) {
					const testList = await apiWriteExamList({
						taskType: classList.data[type].type,
						knowledge: item,
						pageSize: 99999,
						pageNum: 1
					})

					const mergedData = testList.data.rows.reduce((acc, item) => {
						if (!acc[item.seriesType]) {
							acc[item.seriesType] = {
								seriesType: item.seriesType,
								list2: []
							}
						}
						acc[item.seriesType].list2.push(item)
						return acc
					}, {})

					const newRows = Object.values(mergedData)

					list.push({
						name: item,
						list: newRows
					}) // 将 test list 添加到结果列表中
				}
			} catch (error) {
				console.error('Error fetching data:', error)
			}
			this.activeIndex = 0
			this.items = list
			this.vtabs = list.map((item) => ({ title: item.name }))
			this.$nextTick(() => {
				this.showLoad = false
			})
		}
	}
}
</script>
<style>
Page {
	background-color: #f6f8fc;
}
</style>
<style scoped lang="scss">
@function toRem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.search-blank {
	position: sticky;
	top: 0;
}
.nothing {
	margin-top: 14rem;
	img {
		width: 9.333rem;
		height: 6.267rem;
		display: block;
		margin: 0 auto;
	}
}
.head {
	z-index: 1;
	.class-list {
		height: 98rpx;
		display: flex;
		align-items: flex-end;
		font-size: 32rpx;
		.class-item {
			padding: 0 30rpx 28rpx;
			color: #999999;
			position: relative;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
		}
		.active {
			color: #666;
			font-weight: bold;
		}
		// .active::before {
		// 	position: absolute;
		// 	left: calc(50% - 0.6rem);
		// 	text-align: center;
		// 	bottom: -8rpx;
		// 	content: ' ';
		// 	width: toRem(36);
		// 	height: toRem(6);
		// 	line-height: toRem(6);
		// 	background: #fd453d;
		// 	border-radius: toRem(3);
		// }
	}
	.tag-list {
		position: relative;
		z-index: 1;
		background-color: #f6f8fc;
		width: calc(100% - 2rem);
		overflow-y: hidden;
		overflow-x: scroll;

		transition: all 0.3s ease-out;
		padding: toRem(30) toRem(30) 0 toRem(30);
		.tag-item {
			display: inline-block;
			// float: left;
			width: toRem(88);
			height: toRem(48);
			line-height: toRem(48);
			text-align: center;
			background: #ffffff;
			border-radius: toRem(24);
			font-size: toRem(24);
			font-weight: 400;
			color: #333333;
			margin-right: toRem(20);
		}
		.tag-active {
			background-color: #fd453d;
			color: #ffffff;
		}
	}
}
//隐藏滚动条
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
	display: none;
}
.content1 {
	padding: 0 toRem(30) toRem(30) toRem(30);
	background-color: #f6f8fc;

	.title-name {
		color: #999999;
		font-size: toRem(28);
		line-height: toRem(60);
		height: toRem(60);
	}
	.test-list {
		background: #ffffff;
		border-radius: toRem(10);
		.test-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: toRem(80);
			border-bottom: 1px solid #f5f5f5;
			padding: toRem(20);
			.test-title {
				font-size: toRem(28);
				font-weight: bold;
				color: #333333;
			}
			.test-flag {
				font-size: toRem(20);
				color: #999999;
			}
		}
	}
}
.scroll-Y {
	height: toRem(50);
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.write-page {
	height: 100vh;
}
.container {
	// display: flex;
	height: calc(100vh - 98rpx);
	box-sizing: border-box;
}
.sidebar {
	width: 166rpx;
	background: #fff;
	overflow-y: auto;
	position: relative;
	border-radius: 0 10px 0 0;
}

.nav-button {
	display: block;
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	border: none;
	background: #fff;
	cursor: pointer;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	text-align: center;
}

.nav-button.active {
	background: linear-gradient(180deg, #6b9ef8, #2e55e5);
	font-weight: 600;
	color: #ffffff;
}

.content {
	flex: 1;
	overflow-y: auto;
	/* padding: 10px; */
	/* background: #fff; */
}

::v-deep .weui-vtabs-content__item {
	padding: 1.15rem 0.625rem 0;
	// border-bottom: 1px solid #ddd;
	box-sizing: border-box;
	.content-box {
		&:first-child .tit {
			margin-top: 0 !important;
		}
	}
}
::v-deep .vtabs_content {
	&:last-child {
		.weui-vtabs-content__item {
			min-height: calc(100vh - 90rpx);
		}
	}
}
::v-deep .weui-vtabs-content__item .tit {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 0.875rem;
	color: #333333;
	margin-bottom: 0.9375rem;
	margin-top: 0.9375rem;
}
::v-deep .weui-vtabs-content__item .list-box {
	background: #ffffff;
	border-radius: 10rpx;
	.list-item {
		height: 4.1rem;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
		.red-icon {
			position: absolute;
			top: 0;
			right: 0;
			// height: 1rem;
			background: rgba(253, 69, 61, 0.1);
			border-radius: 0px 10px 0px 10px;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 0.6875rem;
			line-height: 0.6875rem;
			color: #fd453d;
			// line-height: 1rem;
			-webkit-text-size-adjust: none;
			padding: 0.26rem 0.5rem;
		}
		&:last-child {
			border: 0;
		}
		.margin-20 {
			height: 4.1rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 0.625rem;
			.item-right {
				// width: 5.625rem;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 0.6875rem;
				color: #333333;
				white-space: nowrap;
				span {
					font-weight: bold;
					font-size: 0.875rem;
				}
			}
			.item-left {
				// width: calc(100% - 5.625rem);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 0.875rem;
				color: #333333;
				.blue-icon {
					background: #99bcff;
					border-radius: 0.25rem;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 0.625rem;
					line-height: 0.625rem;
					color: #ffffff;
					padding: 0.3125rem;
					margin-left: toRem(10);
				}
				.answer-count{
					background-color: #E1E2FD;
					border-radius: toRem(10);
					color: #6025BB;
					font-size: toRem(20);
					padding: toRem(5) toRem(8);
					margin-left: toRem(20);
				}
			}
		}
	}
}

// .write-page {
// 	background-color: #ffffff;
// 	height: 100%;
// }
.vtabs-content-item {
	width: 100%;
	height: 300px;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}
.container {
	::v-deep .weui-vtabs-bar__wrp {
		width: 166rpx !important;
	}
	::v-deep .weui-vtabs-bar__content {
		width: 166rpx !important;
		background: #fff !important;
		border-radius: 0 10px 0 0 !important;
	}
	::v-deep .weui-vtabs-bar__item {
		width: 166rpx !important;
		height: 100rpx !important;
		border-left: 0 !important;
		&:first-child {
			border-top-right-radius: 10px;
		}
	}
}
.pop-content{
	width: toRem(550);
	min-height: toRem(260);
	padding: toRem(43) toRem(30) toRem(30);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	.main{
		color: #3F3F3F;
		font-size: toRem(30);
		font-weight: bold;
	}
	.sub{
		color: #5B5B5B;
		font-size: toRem(25);
		line-height: toRem(40);
		margin-top: toRem(40);
	}
	.ok{
		color: #8287FA;
		font-size: toRem(31);
		margin-top: toRem(50);
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: toRem(50) toRem(50) 0;
		box-sizing: border-box;
		width: 100%;
		font-size: toRem(25);
		.btn-item{
			width: toRem(150);
			height: toRem(55);
			border-radius: toRem(7);
			text-align: center;
			line-height: toRem(55);
			&:first-child{
				background-color: #C6C7CC;
				color: #FFFFFF;
			}
			&:last-child{
				background-color: #8287FA;
				color: #FFFFFF;
			}
		}
		.btn-item2{
			width: toRem(150);
			height: toRem(55);
			border-radius: toRem(7);
			text-align: center;
			line-height: toRem(55);
			&:first-child{
				background-color: #fff;
				border: 1rpx solid #8287FA;
				color: #8287FA;
			}
			&:last-child{
				
				background-color: #8287FA;
				color: #FFFFFF;
			}
		}
	}

}
.load{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	.load-com{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}
</style>
